<template>
	<view>

		<view style="padding: 20upx;background-color: #FFFFFF;">

			<scroll-view scroll-y :style="{ 'height':scrollHeight }">
				<view>
					<rich-text :nodes="protocol.content"></rich-text>
				</view>

			</scroll-view>

			<catSignatureVue ref="sig" :visible='visible' @close="catClose" @save='getImage'></catSignatureVue>

			<view
				style="display: flex;position: fixed;flex-direction: column;border-top: 1px solid #F5F5F5; bottom: 0;left: 0; padding: 30upx;background-color: #FFFFFF;">
				<view style="padding 20px 10px; font-size: 14px; color:#ff7700;margin: 10px 0px ">
					请您仔细阅读上述协议内容,如无任何异议请签上姓名并提交。
				</view>
				<view
					style="display: flex; flex-direction: row;height: 220rpx; text-align: center; border: 1px solid @eee;"
					class="items-center;">

					<view style="flex: 1; " @click="checkagree">
						<view v-if="!imageCode">请在此处签名</view>
						<image :src="imageCode" style='height:  220rpx' mode="heightFix" v-if="imageCode" />
					</view>
				</view>

				<view>
					<button type="primary" @click="saveContractBefore" :disabled="submited">提交</button>
				</view>

			</view>
		</view>
		<u-toast ref="utoast"></u-toast>
	</view>
</template>

<script>
	import Utils from '../../common/Utils.js'
	import catSignatureVue from './components/cat-signature/cat-signature.vue'
	export default {
		components: {
			catSignatureVue
		},
		data() {
			return {
				protocol: {},
				checked: false,
				visible: false,
				imageCode: "",
				Binded: false,
				messageText: '',
				loaded: false,
				scrollHeight: "",
				student: {},
				signFile: null,
				uploadBuffer: null,
				singUrl: "",
				uploadPath: "",
				userInfo: "",
				submited: false,
				applyUrl: "/whs/applications",
				evaluationId: "",
			}
		},
		onLoad(options) {

			this.getContract()


		},
		onShow() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollHeight = `${res.windowHeight-220}px`;
				}
			});

		},
		methods: {

			getContract(contracId) {
				this.$get({
					url: `${this.$Utils.ApiUrl}/protocols/shop_protocol/latest`,
					data: {

					}
				}).then(res => {
					this.protocol = res;
					console.log(res)
				})

			},

			catClose() {
				this.visible = false;
			},
			checkagree() {
				this.visible = true;
			},
			getImage(dataUrl) {
				this.imageCode = dataUrl;

				console.log(dataUrl);
				this.visible = false;
				this.checked = true;
			},

			guid() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = Math.random() * 16 | 0,
						v = c == 'x' ? r : (r & 0x3 | 0x8);
					return v.toString(16);
				});
			},
			saveContractBefore() {
				this.saveContract()
			},
			uploadFilePromise(path, aRes) {
				let _that = this;
				let ext = path.substring(path.lastIndexOf('.'))
				let _fileKey = `images/${this.userInfo.Name}_${Utils.guid()}${ext}`;
				return new Promise((resolve, reject) => {


					wx.uploadFile({
						url: aRes.Host, //仅为示例，非真实的接口地址
						filePath: path,
						name: 'file',
						formData: {
							key: _fileKey,
							'Policy': aRes.Policy, //后端Base64编码格式的授权策略 用于签名
							'OSSAccessKeyId': aRes.AccessKeyId, //OSS控制台获取
							'Success_Action_Status': '200', //让服务端返回200,不然，成功上传图片后阿里默认返回statusCode: 204
							'Signature': aRes.Signature, //服务端返回的签名内容 
						},
						success(res) {
							console.log(res)
							if (res.errMsg == 'uploadFile:ok') {
								resolve(`${ aRes.Host}/${_fileKey}`)
							}


						},
						fail(err) {
							console.log(err)
							reject(err)
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});

						}
					})
				})

			},
			saveContract() {

				var _that = this;
				if (!this.imageCode) {
					uni.showToast({
						title: `请先签名`,
						icon: 'none'
					});
					return;
				}
				this.submited = true;
				let user = this.$store.state.userInfo;


				_that.$get({
					url: `${Utils.ApiUrl}/files/signature`,
					data: {
						dir: 'images/'
					}
				}).then(async (aRes) => {
					const result = await _that.uploadFilePromise(this.imageCode, aRes);
					let postData = {
						signatureUrl: result,
						protocolId: _that.protocol.id
					}
					console.log(postData)
					this.doPost(postData)

				})
				return;
			},

			doPost(postData) {
				this.$post({
					url: Utils.ApiUrl + '/shop/applications',
					data: postData,
				}).then((res) => {
					console.log(res.data);
					this.$refs.utoast.show({
						message: "申请成功",
						complete() {
							uni.switchTab({
								url: '/pages/my/my'
							})
						}
					})
				}).catch((err) => {
					that.Binded = true;
				})
			}
		}
	}
</script>

<style>

</style>